
<template>
  <base-page-view class-name="page-container box-page boxDetails_page">
    <base-nav title="" class="boxDetails_nav">
      <view v-if="!isHide" slot="left" @click="handelBack">
        <image class="header-left" src="/static/images/icon/icon_arror_left.png" />
      </view>
      <view slot="title">
        <view class="title_nav">{{ navTitle }}</view>
      </view>
      <view slot="right">
        <picker mode="date" :value="datePickValue" fields="month" @change="bindDateChange">
          <image class="header-right" src="/static/images/commission/date_icon.png" />
        </picker>
      </view>
    </base-nav>
    <view v-if="boxDetails.masterUserBoxingMODEL" class="list boxDetailsNew">
      <view class="title">
        <view>{{ boxDetails.masterUserBoxingMODEL.title || '' }}</view>
      </view>
      <view class="list_box_all">
        <view class="list_box">
          <view class="box b-r">
            <view>{{ boxDetails.masterUserBoxingMODEL.number }}</view>
            <view class="text">普通箱数</view>
          </view>
          <view class="box">
            <view>{{ boxDetails.masterUserBoxingMODEL.familyNumber }}</view>
            <view class="text">活动箱数</view>
          </view>
        </view>
        <view v-if="false" class="list_box">
          <view class="box b-r">
            <view v-if="boxDetails.masterUserBoxingMODEL.reward >= 0">{{ boxDetails.masterUserBoxingMODEL.reward| formatMoney }}</view>
            <view v-else class="totalPriceRed">{{ Math.abs(boxDetails.masterUserBoxingMODEL.reward) | formatMoney }}</view>
            <view class="text">预估普通折扣（元）</view>
          </view>
          <view class="box">
            <view>{{ boxDetails.masterUserBoxingMODEL.familyReward | formatMoney }}</view>
            <view class="text">预估活动折扣（元）</view>
          </view>
        </view>
      </view>
      <view class="join-user-log" @click="$navigateTo(`/pagesCommission/box/list?ruleId=${boxDetails.masterUserBoxingMODEL.ruleId}&monthValue=${monthValue}&directChildCount=${boxDetails.masterUserBoxingMODEL.directChildCount}`)">
        <view class="flex-block">
          <image src="/static/images/commission/icon_joinUser.png" mode="aspectFit" />
          <view class="text">活动直接参与用户</view>
        </view>
        <image src="/static/images/commission/list_more.png" mode="aspectFit" />
      </view>
    </view>
    <view v-if="boxDetails.slaveUserBoxingMODEL" class="list boxDetailsNew">
      <view class="title">
        <view>{{ boxDetails.slaveUserBoxingMODEL.title || '' }}</view>
      </view>
      <view class="list_box_all">
        <view class="list_box">
          <view class="box b-r">
            <view>{{ boxDetails.slaveUserBoxingMODEL.number }}</view>
            <view class="text">普通箱数</view>
          </view>
          <view class="box">
            <view>{{ boxDetails.slaveUserBoxingMODEL.familyNumber }}</view>
            <view class="text">活动箱数</view>
          </view>
        </view>
        <view v-if="false" class="list_box">
          <view class="box b-r">
            <view v-if="boxDetails.slaveUserBoxingMODEL.reward >= 0">{{ boxDetails.slaveUserBoxingMODEL.reward| formatMoney }}</view>
            <view v-else class="totalPriceRed">{{ Math.abs(boxDetails.slaveUserBoxingMODEL.reward) | formatMoney }}</view>
            <view class="text">预估普通折扣（元）</view>
          </view>
          <view class="box">
            <view>{{ boxDetails.slaveUserBoxingMODEL.familyReward | formatMoney }}</view>
            <view class="text">预估活动折扣（元）</view>
          </view>
        </view>
      </view>
      <view class="join-user-log" @click="$navigateTo(`/pagesCommission/box/list?ruleId=${boxDetails.slaveUserBoxingMODEL.ruleId}&monthValue=${monthValue}&directChildCount=${boxDetails.slaveUserBoxingMODEL.directChildCount}`)">
        <view class="flex-block">
          <image src="/static/images/commission/icon_joinUser.png" mode="aspectFit" />
          <view class="text">活动直接参与用户</view>
        </view>
        <image src="/static/images/commission/list_more.png" mode="aspectFit" />
      </view>
    </view>
  </base-page-view>
</template>

<script>
import './index.scss'
import { filters } from '@/utils/tools.js'
import { inApp } from '@/utils/tools'
export default {
  components: {
  },
  data() {
    return {
      list: [],
      monthValue: '',
      boxDetails: {
        number: 0,
        familyNumber: 0,
        reward: 0,
        familyReward: 0,
        directChildCount: 0
      },
      pageNo: 1,
      pageSize: 10,
      nomore: false,
      ruleId: '',
      navTitle: '',
      datePickValue: ''
    }
  },
  computed: {
    isHide() {
      return inApp()
    }
  },
  created() {

  },
  onLoad(option) {
    const myDate = new Date()
    const year = myDate.getFullYear()
    let month = myDate.getMonth() + 1
    month = month > 9 ? month : '0' + month
    this.monthValue = year + '' + month
    this.datePickValue = year + '-' + month
    this.navTitle = year + '年' + month + '月'
    this.nomore = false
    this.ruleId = option.ruleId
    this.initData()
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.list = []
    this.nomore = false
    this.initData()
  },
  onReachBottom() {
    if (this.nomore) return
    this.pageNo += 1
    this.getList()
  },
  onShow() {
    this.$setNavTitle('', false)
  },
  methods: {
    async initData() {
      const res = await this.$api.commissionApi.getFamilyRewardInfoByUserIdNew({ ruleId: this.ruleId, monthValue: this.monthValue, userId: this.$store.state.userInfo.uid })
      if (res.code === '000000') {
        this.boxDetails = { ...res.data }
      }
    },
    bindDateChange: function(e) {
      console.log(e.target.value)
      this.navTitle = filters.parseTime(new Date(e.target.value).getTime(), '{y}年{m}月')
      this.datePickValue = filters.parseTime(new Date(e.target.value).getTime(), '{y}-{m}')
      this.monthValue = filters.parseTime(new Date(e.target.value).getTime(), '{y}{m}')
      this.pageNo = 1
      this.list = []
      this.nomore = false
      this.initData()
    },
    handelBack() {
      uni.navigateBack()
    }
  }
}
</script>
